<template>
	<view class="card skus">
		<view class="sku_bg" :style="{ backgroundImage: `url(${imgBaseUrl}sku-bg.png)` }"></view>
		<view class="package">游玩套餐·日期</view>
		<view class="content-card">
			<view class="trip-title">
				<image :src="`${imgBaseUrl}trip-detail-icon.png`" class="img" />
				<text class="text">线路详情</text>
			</view>

			<scroll-view class="scroll-view" scroll-x scroll-with-animation :scroll-into-view="scrollIntoViewId">
				<view class="trip-list">
					<view
						:id="`trip-list-item-${index}`"
						class="trip-list-item"
						:class="{ checked: checkedPackageInfo.id === item.id }"
						v-for="(item, index) in skus"
						:key="item.id"
						@click="handleTripListItemClick(item, index)"
					>
						<view class="top">
							<text class="trip-name">线路{{ index + 1 }}：</text>
							<view class="price">
								<text class="prefix font-oppo">￥</text>
								<text class="num font-oppo">
									{{ priceInCent(+item.lowest_price_in_cent) }}
								</text>
								<text class="at-least">起</text>
							</view>
						</view>
						<view class="display_name text-ellipsis">{{ item.display_name }}</view>
						<image
							:src="`${imgBaseUrl}price-check-icon.png`"
							class="price-check-icon"
							v-if="checkedPackageInfo.id === item.id"
						/>
					</view>
				</view>
			</scroll-view>

			<view class="checked-trip-info" v-if="checkedPackageInfo.id">
				<view class="checked-title">已选</view>
				<view class="checked-display-name">{{ checkedPackageInfo.display_name }}</view>
				<view class="checked-date">{{ checkedPriceInfo.date }} 出发</view>
			</view>

			<view class="trip-title trip-date">
				<image :src="`${imgBaseUrl}trip-date-icon.png`" class="img" />
				<text class="text">游玩日期</text>
			</view>

			<PriceList
				:id="checkedPackageInfo.id || ''"
				:prices="checkedPackageInfo.prices || []"
				:date="date"
				page_type="trip"
				:latest_sale_date="checkedPackageInfo.latest_sale_date || ''"
				@price-change="handlePriceChange"
				@calendar-visible="handleCalendarVisible"
			/>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, watchEffect } from "vue"
import dayjs from "dayjs"
import { $getTripListPrice, $getTripSales } from "@/api/trip"
import { priceInCent } from "@/mixins/mixins"
import type { Price } from "@/types/ticket"
import PriceList from "../../components/price-list.vue"
const imgBaseUrl = inject("imgBaseUrl")

interface CheckedPriceInfo {
	date: string
	price_in_cent: string
	isAllNoneSellable: boolean
}

interface Skus {
	id: string
	prices: Price[]
	latest_sale_date: string
	display_name: string
	lowest_price_in_cent: string
}

interface PlayPackageProps {
	date: string
	skus: Skus[]
}

// 选中的套餐信息
const checkedPackageInfo = ref<Partial<Skus>>({})

// 选中的价格信息
const checkedPriceInfo = reactive<CheckedPriceInfo>({
	date: "",
	price_in_cent: "",
	// 套餐中最近90天内都不可售
	isAllNoneSellable: false,
})

const scrollIntoViewId = ref("")

const props = defineProps<PlayPackageProps>()
const emit = defineEmits(["calendar-visible", "price-change", "package-change"])

const handlePriceChange = (info: CheckedPriceInfo) => {
	checkedPriceInfo.date = info.date
	checkedPriceInfo.price_in_cent = info.price_in_cent
	checkedPriceInfo.isAllNoneSellable = info.isAllNoneSellable

	emit("price-change", checkedPriceInfo)
}

const handleCalendarVisible = (visible: boolean) => emit("calendar-visible", visible)

const handleTripListItemClick = async (item: Skus, idx: number) => {
	if (item.id === checkedPackageInfo.value.id) return

	scrollIntoViewId.value = `trip-list-item-${idx}`

	const data = await $getTripSales(item.id)

	checkedPackageInfo.value = data as Skus

	emit("package-change", checkedPackageInfo.value)
}

defineExpose({
	handlePackageClick: handleTripListItemClick,
})

// 寻找是否有可售卖的
const findSellable = (list: Price[]) => list.some((item) => item.salable && !item.sold_out)

watchEffect(async () => {
	if (props.skus?.length) {
		if (props.date) {
			const res = props.skus[0].prices.some((item) => item.date === props.date)

			if (res) {
				checkedPackageInfo.value = props.skus[0]
				return
			} else {
				const data = await $getTripListPrice(
					props.skus[0].id,
					props.skus[0].latest_sale_date,
					dayjs(props.skus[0].latest_sale_date).add(90, "day").format("YYYY-MM-DD")
				)

				const list = (data as { list: Price[] }).list

				const result = list.some((item) => item.date === props.date)

				if (result) {
					checkedPackageInfo.value = props.skus[0]
					return
				}
			}
		}

		for await (const item of props.skus) {
			const result = findSellable(item.prices)

			if (result) {
				checkedPackageInfo.value = item
				break
			} else {
				const data = await $getTripListPrice(
					item.id,
					item.latest_sale_date,
					dayjs(item.latest_sale_date).add(90, "day").format("YYYY-MM-DD")
				)

				const list = (data as { list: Price[] }).list

				// 最近90天内是否存在可售卖的
				const res = findSellable(list)

				if (res) {
					checkedPackageInfo.value = item
					break
				} else {
					continue
				}
			}
		}

		// 如果每一份套餐内的价格都不可售
		if (!Object.keys(checkedPackageInfo.value).length) {
			checkedPackageInfo.value = props.skus[0]
			checkedPriceInfo.isAllNoneSellable = true
		}

		emit("package-change", checkedPackageInfo.value)
	}
})
</script>

<script lang="ts">
export default {
	options: { styleIsolation: "shared" },
}
</script>

<style lang="scss" scoped>
@import "../../ticket/index.scss";

.skus {
	position: relative;
	background: linear-gradient(180deg, #ffe7b6 0%, #ffedc9 100%);
	border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;

	.sku_bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 512rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.package {
		margin-bottom: 24rpx;
		font-weight: 700;
		font-size: 40rpx;
		color: #1d2129;
		line-height: 52rpx;
		letter-spacing: 1px;
	}

	.content-card {
		padding: 32rpx 24rpx;
		background: linear-gradient(180deg, rgba(255, 243, 215, 0.6) 0%, rgba(255, 255, 255, 0) 100%), #ffffff;
		border-radius: 16rpx;
		border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;

		.trip-title {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.img {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}

			.text {
				font-weight: 600;
				font-size: 32rpx;
				color: #1d2129;
				line-height: 44rpx;
			}
		}

		.scroll-view {
			white-space: nowrap;
		}

		.trip-list {
			width: fit-content;
			display: flex;
			align-items: center;

			&-item {
				position: relative;
				// flex: 1;
				width: 408rpx;
				height: 128rpx;
				padding: 24rpx;
				padding-bottom: 22rpx;
				background: #f8f9fc;
				border-radius: 16rpx;
				border: 2rpx solid transparent;

				&:not(:last-child) {
					margin-right: 16rpx;
				}

				.top {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;

					.trip-name {
						font-size: 28rpx;
						color: #1d2129;
						line-height: 40rpx;
					}

					.price {
						display: inline-flex;
						align-items: baseline;

						.prefix {
							font-size: 20rpx;
							line-height: 28rpx;
							color: #f53f3f;
						}

						.num {
							margin-left: 4rpx;
							margin-right: 2rpx;
							font-weight: 600;
							font-size: 28rpx;
							color: #f53f3f;
							line-height: 40rpx;
						}

						.at-least {
							font-size: 20rpx;
							color: #86909c;
							line-height: 28rpx;
						}
					}
				}

				.display_name {
					font-size: 24rpx;
					color: #1d2129;
					line-height: 32rpx;
				}

				&.checked {
					background: rgba(254, 224, 56, 0.1);
					border: 2rpx solid #fee038;

					.trip-name {
						font-weight: 600;
					}

					.display_name {
						font-weight: 600;
					}

					.price-check-icon {
						position: absolute;
						right: -1rpx;
						bottom: -1rpx;
						width: 24rpx;
						height: 20rpx;
					}
				}
			}
		}

		.checked-trip-info {
			padding: 20rpx 24rpx;
			margin-top: 22rpx;
			background: rgba(254, 224, 56, 0.2);
			border-radius: 16rpx;

			.checked-title {
				font-weight: 600;
				font-size: 24rpx;
				color: #1d2129;
				line-height: 34rpx;
			}

			.checked-display-name {
				margin-top: 8rpx;
				margin-bottom: 4rpx;
				font-size: 24rpx;
				color: #1d2129;
				line-height: 34rpx;
			}

			.checked-date {
				font-size: 24rpx;
				color: #1d2129;
				line-height: 34rpx;
			}
		}

		.trip-date {
			margin-top: 40rpx;
		}

		::v-deep .price-list-item {
			max-width: 144rpx !important;
			padding: 16rpx 32rpx !important;
		}
	}
}
</style>
